<template>
  <div class="step1 absolute-center">
    <div class="top">
      选择模板
      <i class="pointer" @click="close"></i>
    </div>
    <div class="content">
      <div class="left">
        <ul>
          <li :class="type==3?'active':''" @click="queryMilepostTemp(3)">公共模板</li>
          <li :class="type==2?'active':''" @click="queryMilepostTemp(2)">公司模板</li>
          <li :class="type==1?'active':''" @click="queryMilepostTemp(1)">我的模板</li>
        </ul>
      </div>
      <div class="right">
        <vuescroll :ops="ops">
          <ul>
            <li v-for="(item,index) in milepostTemp" :key="index" @click="toSetMilepost(item)">
              <i :class="type==1?'my_icon':(type==2?'company_icon':'common_icon')"></i>
              <p>{{item.name}}</p>
            </li>
          </ul>
        </vuescroll>

      </div>
      <div class="custom-btn" @click="toSetMilePost">自定义</div>
    </div>
  </div>
</template>

<script>
  import vuescroll from 'vuescroll'
  export default {
    name: "Milepost",
    props: {
      projectId: {},
      projectInfo: {}
    },
    components: {
      vuescroll
    },
    data() {
      return {
        milepostTemp: [],
        ops: {
          vuescroll: {
            wheelDirectionReverse: false,//true：横向滚动，false：竖向滚动
            wheelScrollDuration: 0,//滚动速度
            mode: 'native',
            sizeStrategy: 'percent',
            detectResize: true
          },
          scrollPanel: {
            scrollingX: false,//启用横屏滚动
            scrollingY: true,//关闭竖向滚动
          },
          rail: {
            background: '#e5ebf1',
            opacity: 1,
            size: '6px',
            borderRadius: '6px',
            gutterOfEnds: '40px',//轨道距 x 和 y 轴两端的距离
            gutterOfSide: '10px'//距离容器的距离
          },
          bar: {
            onlyShowBarOnScroll: false,//是否只在滚动时显示bar
            background: '#cbd5df',
            keepShow: true,
            size: '4px',
            minSize: false
          }
        },//滚动配置
        type:3,//1公共模板。2公司模板 3我的模板
      };
    },
    created() {
      //查询模板
      this.queryMilepostTemp(3);
    },
    methods: {
      //查询里程碑模板
      queryMilepostTemp(flag) {
        this.type=flag;
        let params = {};
        params.companyId = this.$store.state.userInfo.companyId;
        params.userId = this.$store.state.userInfo.userId;
        params.flag = flag;
        // 查询模板列表接口， 参数companyId 可以为空，为空时查询公共模板, name模板名称 可以为空,
        //   userId：用户id, flag:1我的模板，2公司模板，3公共模板
        this.$http.get('plan/plan/temp/list', {
          params: params
        }).then(res => {
          if (res.statusCode == 200) {
            this.milepostTemp = res.data;
          } else {
            this.$message.error(res.statusMsg);
          }
        });
      },
      toSetMilePost() {
        this.$router.push({
          path: '/project/milepost2', query: {
            id: this.projectInfo.id,
            name: this.projectInfo.shortName
          }
        });
      },
      //关闭
      close() {
        this.$emit("close");
      },
      //去设置里程碑
      toSetMilepost(data){
        this.$router.push({
          path: '/project/milepost2',query:{
            tempId:data.groupId,
            id: this.projectInfo.id,
            name: this.projectInfo.shortName
          }});
      },
    },
  }
</script>

<style scoped type="text/scss" lang="scss">
  .step1 {
    width: 608px;
    height: 433px;
    border-radius: 6px;
    background-color: #FFFFFF;
    padding: 0 32px;
    display: flex;
    flex-direction: column;

    .top {
      line-height: 78px;
      height: 78px;
      border-bottom: 1px solid #eee;
      font-size: 16px;
      font-weight: bold;
      position: relative;

      > i {
        background-image: url("../../assets/img/close_icon.png");
        background-size: 16px 17px;
        background-position: center;
        background-repeat: no-repeat;
        height: 17px;
        width: 16px;
        position: absolute;
        top: 30px;
        right: 0;
      }
    }

    .content {
      flex: 1;
      display: flex;
      position: relative;

      .left {
        width: 87px;

        > ul {
          li {
            padding-top: 32px;
            color: #96a2aa;
            font-size: 14px;
            cursor: pointer;
          }

          .active {
            color: #323234;
            font-weight: bold;
          }
        }
      }

      .right {
        width: calc(100% - 87px);
        height: 274px;
        background-color: #f2f6f9;
         ul {
          overflow: hidden;
          padding-bottom: 20px;
          > li {
            width: 120px;
            float: left;
            margin-left: 24px;
            margin-top: 24px;
            height: 80px;
            background-color: #ffffff;
            border-radius: 6px;
            position: relative;
            cursor: pointer;
            >i{
              position: absolute;
              width: 26px;
              height: 22px;
              left: 48px;
              top: 16px;
              background-position: center;
              background-size: cover;
              background-repeat: no-repeat;
            }
            >.my_icon{
              background-image: url("../../assets/img/milepost/ic_my_template.png");
            }
            >.company_icon{
              background-image: url("../../assets/img/milepost/ic_company.png");
            }
            >.common_icon{
              width: 24px;
              background-image: url("../../assets/img/milepost/ic_xmgl.png");
            }
            >p{
              padding-top: 50px;
              font-size: 12px;
              color: #323234;
              text-align: center;
            }
          }
        }
      }

      .custom-btn {
        position: absolute;
        width: 88px;
        height: 32px;
        line-height: 32px;
        bottom: 24px;
        right: 0;
        text-align: center;
        background-color: #0755db;
        border-radius: 6px;
        color: #FFFFFF;
        cursor: pointer;
      }
    }
  }
</style>
